<template>
  <div class="flex items-start justify-center gap-1 sm:gap-1.5">
    <el-tag
      v-for="tag in tags"
      :key="tag"
      :class="{ 'is-selected': isSelected(tag) }"
      class="mx-0 cursor-pointer transition-all duration-150"
      @click="selectTag(tag)"
    >
      {{ tag }}
    </el-tag>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  tags: string[];
}>();

const modelValue = defineModel<string>();

const isSelected = (tag: string) => {
  return modelValue.value === tag;
};

const selectTag = (tag: string) => {
  modelValue.value = modelValue.value === tag ? "" : tag;
};
</script>

<style scoped>
.el-tag.is-selected {
  font-weight: 500;
  color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary);
  border-width: 2px;
}
</style>
